<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0042)http://jscs.cloudapp.net/ControlsSample/CM -->
<HTML xmlns="http://www.w3.org/1999/xhtml">
	<HEAD>
	<META http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	    <TITLE></TITLE>
	    <LINK href="../jquery.contextmenu.css" rel="stylesheet" type="text/css" class="view-source"/>
		<link  href="../../../../themes/default/style.css" class="view-source" rel="stylesheet">
		<script src="../../../../scripts/jquery.js"  class="view-source" type="text/javascript"></script>
		<script src="../../../../scripts/common.js"  class="view-source" type="text/javascript"></script>
		<script src="../../../../scripts/browserfix.js"  class="view-source" type="text/javascript" ></script>
		<script src="../../../../scripts/plugins/jquery.json.js" type="text/javascript"></script>
		
		<SCRIPT src="../jquery.contextmenu.js" type="text/javascript" class="view-source"></SCRIPT> 
		
	
	<script src="../../demo.js"></script>
	<link href="../../demo.css" rel="stylesheet">

	    
<SCRIPT type="text/javascript" class="view-source noparse">
$(function(){
     var option1 = { width: 150, items: [
             { text: "第一项", icon: "../images/ico1.gif", alias: "1-1", action: menuAction,disable: true },
             { text: "第二项", icon: "../images/ico2.gif", alias: "1-2", action: menuAction },
             { text: "第三项", icon: "../images/ico3.gif", alias: "1-3", action: menuAction },
             { type: "splitLine" },
             { text: "第四项", icon: "../images/ico5.gif", alias: "1-5", action: menuAction }
             ]
        };

    var option2 = { width: 150, items: [
            { text: "第一项", icon: "../images/ico1.gif", alias: "1-1", action: menuAction,disable: true },
            { text: "第二项", icon: "../images/ico2.gif", alias: "1-2", action: menuAction },
            { text: "第三项", icon: "../images/ico3.gif", alias: "1-3", action: menuAction },
            { type: "splitLine" },
            { text: "第四项", icon: "../images/ico5.gif", alias: "1-5", action: menuAction }
            ]
       };
        
       function menuAction() {
           alert("alias: " + this.data.alias + ";text: " + this.data.text );
       }
      
    $("#target1").contextmenu(option1);
    $("#target2").contextmenu(option2);
    $("#target1").bind("contextmenu",function(e){$(this).contextmenu().show(e);});
    $("#target2").bind("mouseover",function(e){$(this).contextmenu().show(e);});
      
});

</SCRIPT>
	</HEAD>
	<BODY>
	        <DIV id="target1" class="btn target">绑定右键事件触发</DIV>
	        
	        <DIV id="target2" class="btn target2">绑定鼠标悬浮事件触发</DIV>
	        
	     
	</BODY>
</HTML>